<template>
  <div class="dashbosrd-container">
    <div class="app-container">
      <el-card>
        <!-- 工具栏组件 -->
        <pageTools @filterValue="filterContent">
          <el-button type="primary" size="small" @click="addFn">添加页面</el-button>
        </pageTools>
        <hr class="cross-line">
        <!-- 表格 -->
        <el-table border :data="clientList" style="height:100%">
          <el-table-column label="图片" prop="image">
            <template v-slot="{row}">
              <img :src="row.image" style="width:120px">
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name" />
          <el-table-column label="邮箱" prop="email" />
          <el-table-column label="电话" prop="phone" />
          <el-table-column label="经纪" prop="agent.elm" />
          <el-table-column label="微信" prop="wechat" />
          <el-table-column label="介绍" prop="desc" />
          <el-table-column label="操作" width="150px">
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout=" prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 新增弹窗 -->
    <addClients ref="addClients" :show-dialog.sync="showDialog" @updateEvent="getClientsLists" />
  </div>
</template>
<script>
import { getClientsList, getClientsCount, delClients } from '@/api/clients'
import addClients from './components/add-clients.vue'
export default {
  components: {
    addClients
  },
  data() {
    return {
      clientList: [], // 客户数据列表
      total: 0, // 总数量
      // size: 2, // 每页请求的数量
      limit: 2, // 每页获取的条数
      start: 0, // 开始获取的位置
      showDialog: false,
      filterContentData: '', // 子组件传来的数据
      clientListAll: {}// 所有数据

    }
  },
  async created() {
    // 渲染页面
    this.getClientsLists()
  },
  methods: {
    // 渲染页面
    async getClientsLists() {
      const res = await getClientsList({
        _limit: this.limit,
        _start: this.start
      })
      // 总数量
      const total = await getClientsCount()
      this.total = total.data // 获取客户数量
      // console.log(2, total.data)
      this.clientList = res.data // 获取客户列表
    },
    // 页面发生改变
    currentChange(start) {
      this.start = 0 + (start - 1) * this.limit // 获取点击页面的数据
      this.getClientsLists()
    },
    // 新增
    addFn() {
      this.showDialog = true // 控制弹窗显示
    },
    // 删除
    delFn(id) {
      this.$confirm('您确定删除该客户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delClients(id)// 删除数据
        this.getClientsLists()// 刷新表单
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑
    async editFn(id) {
      this.showDialog = true // 控制弹窗显示
      this.$refs.addClients.getClientsDetail(id)
    },
    // 接收子组件传来的数据 用于是筛选
    async filterContent(val, id) {
      // 子组将返回的数据
      this.filterContentData = val
      // 获取所有客户数据
      const clientListAll = await getClientsList()
      const All = clientListAll.data
      // console.log(All)
      // 遍历数组
      const res = All.filter((item) => {
        // 获取与用户输入的名字相等的对象
        return item.name === this.filterContentData
      })

      // console.log('父组件得到的', id)
      // 将过滤后与筛选中的name相等的拿出来的数组再次过滤里面的对象
      console.log(id)
      res.filter((item) => {
        if (id) {
          // 如果id存在 并且与子组件传过来的id相等 则渲染
          this.clientList = item.agent.id === id ? res : []
        } else {
          // 用户没有确定id 则统一渲染
          this.clientList = res
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped >
.cross-line{
  margin-top:25px;
  margin-bottom:20px;
  border:0.5px solid #dedfe6
  }
</style>

